<template>
  <el-form 
    :model="form" 
    :rules="rules" 
    ref="formRef"
    @submit.prevent="submitForm"
  >
    <!-- 注册用户名（仅注册模式显示） -->
    <el-form-item v-if="mode === 'register'" prop="username">
      <el-input
        v-model="form.username"
        placeholder="请输入用户名（4-20位）"
        prefix-icon="User"
      />
    </el-form-item>

    <!-- 邮箱字段（登录/注册共用） -->
    <el-form-item prop="email">
      <el-input
        v-model="form.email"
        type="email"
        placeholder="请输入邮箱"
        prefix-icon="Message"
      />
    </el-form-item>

    <!-- 密码字段 -->
    <el-form-item prop="password">
      <el-input
        v-model="form.password"
        type="password"
        placeholder="请输入密码（至少8位）"
        show-password
        prefix-icon="Lock"
      />
    </el-form-item>

    <!-- 系统级错误提示（全局错误） -->
    <el-alert 
      v-if="authStore.error"
      :title="authStore.error"
      type="error"
      show-icon
      class="error-alert"
    />

    <!-- 提交按钮（根据模式切换文本和样式） -->
    <el-form-item>
      <el-button
        :type="mode === 'login' ? 'primary' : 'success'"
        native-type="submit"
        :loading="authStore.loading"
        class="submit-btn"
      >
        {{ mode === 'login' ? '立即登录' : '注册账户' }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useAuthStore } from '@/stores/authStore'

// 定义组件 props（模式：登录/注册）
const props = defineProps({
  mode: {
    type: String,
    required: true,
    validator: val => ['login', 'register'].includes(val) // 仅允许 login 或 register
  }
})

// 定义事件：提交表单数据
const emit = defineEmits(['submit'])

// 引入认证 store
const authStore = useAuthStore()

// 表单数据绑定
const form = ref({
  username: '',
  email: '',
  password: ''
})

// 正则表达式常量（提升可维护性）
const USERNAME_PATTERN = /^[a-zA-Z0-9_]+$/

// 动态验证规则（根据模式切换）
const rules = computed(() => ({
  username: props.mode === 'register' ? [
    { required: true, message: '请输入用户名', trigger: 'submit' },
    { min: 4, max: 20, message: '长度4-20个字符', trigger: 'submit' },
    { pattern: USERNAME_PATTERN, message: '仅允许字母数字和下划线' }
  ] : [],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'submit' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'submit' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'submit' },
    { min: 8, message: '至少8位字符', trigger: 'submit' }
  ]
}))

// 表单实例引用（用于触发验证和重置）
const formRef = ref(null)

// 表单提交逻辑
const submitForm = async () => {
  try {
    // 1. 触发表单验证
    await formRef.value.validate()
    
    // 2. 收集提交数据（根据模式决定字段）
    const submitData = props.mode === 'login' 
      ? { email: form.value.email, password: form.value.password }
      : { ...form.value } // 包含用户名、邮箱、密码

    // 3. 触发提交事件并传递数据
    emit('submit', submitData)

    // 4. 重置表单（清空输入和验证状态）
    formRef.value.resetFields()
  } catch (error) {
    // 验证失败时直接返回，由 Element UI 显示表单级错误
    return
  }
}
</script>

<style scoped>
.error-alert {
  margin-bottom: 20px;
}

.submit-btn {
  width: 100%;
  height: 40px;
}
</style>